import { ReactNode, useCallback, useEffect, useState } from "react";
import { Drawer, Button, Select, Menu, Dropdown } from "@arco-design/web-react";
import { IconDown, IconClose } from "@arco-design/web-react/icon";
import { applyNodeChanges, type Node } from "reactflow";
import useWorkflowStore from "../../contexts/workflow";

interface NodeFormProps {
  selectedNode: Node | null;
}

const LLMForm = ({ selectedNode }: NodeFormProps): ReactNode => {
  const options = [
    "Claude-3.5-Sonnet",
    "Claude-3.7-Sonnet",
    "Deepseek-V3",
    "gpt-3.5-turbo",
  ];

  const [selectModelValue, setSelectModelValue] = useState(
    selectedNode?.data.model.name
  );

  const { updateNodeData } = useWorkflowStore();

  const changeNode = useCallback(
    (value: string) => {
      if (selectedNode) {
        selectedNode.data.model.name = value;
        setSelectModelValue(() => value);
        updateNodeData(selectedNode);
      }
    },
    [selectedNode, updateNodeData]
  );

  useEffect(() => {
    setSelectModelValue(() => selectedNode?.data.model.name);
  }, [selectedNode]);

  return (
    <>
      <Select
        className="w-sm"
        placeholder="选择模型"
        onChange={changeNode}
        value={selectModelValue}
      >
        {options.map((option) => (
          <Select.Option key={option} value={option}>
            {option}
          </Select.Option>
        ))}
      </Select>
    </>
  );
};

const IfElseForm = ({ selectedNode }: NodeFormProps): ReactNode => {
  const { updateNodeData } = useWorkflowStore();

  const onClickMenuItem = (key: string) => {
    if (selectedNode) {
      selectedNode.data.logicList = [...selectedNode.data.logicList, key];
      updateNodeData(selectedNode);
    }
  };

  const removeLogic = (logicIndex: number) => {
    if (selectedNode) {
      selectedNode.data.logicList.splice(logicIndex, 1);
      updateNodeData(selectedNode);
    }
  };

  const addConditionDropList = (
    <Menu onClickMenuItem={onClickMenuItem}>
      <Menu.Item key="If">If</Menu.Item>
      <Menu.Item key="ElseIf">Else If</Menu.Item>
      <Menu.Item key="Else">Else</Menu.Item>
    </Menu>
  );

  return (
    <div className="">
      <Dropdown droplist={addConditionDropList}>
        <Button type="text">
          添加条件 <IconDown />
        </Button>
      </Dropdown>
      {selectedNode?.data.logicList.map((logic: string, index: number) => {
        return (
          <div key={index}>
            {logic} <IconClose onClick={() => removeLogic(index)} />
          </div>
        );
      })}
    </div>
  );
};

const NodeDrawer = (): ReactNode => {
  const {
    selectedNode,
    setSelectedNode,
    drawerVisible,
    setDrawerVisible,
    nodes,
    setNodes,
  } = useWorkflowStore();

  const onCancel = () => {
    if (selectedNode) {
      setNodes(
        applyNodeChanges(
          [{ id: selectedNode?.id, type: "select", selected: false }],
          nodes
        )
      );
    }
    setSelectedNode({ select: false });
    setDrawerVisible(false);
  };

  const displaySelectNode = () => {
    console.log(selectedNode);
    console.log(nodes);
  };

  return (
    <Drawer
      title="节点详情"
      placement="right"
      closable={true}
      width={400}
      mask={false}
      visible={drawerVisible}
      onCancel={onCancel}
    >
      <Button onClick={displaySelectNode}>Node</Button>
      {selectedNode && (
        <div>
          <p>节点ID: {selectedNode.id}</p>
          <p>节点类型: {selectedNode.type}</p>
          {/* 可以根据需要添加更多节点信息展示 */}
          {selectedNode.type === "llm" && (
            <LLMForm selectedNode={selectedNode} />
          )}
          {selectedNode.type === "ifelse" && (
            <IfElseForm selectedNode={selectedNode} />
          )}
        </div>
      )}
    </Drawer>
  );
};

export default NodeDrawer;
